<template>
  <a-tree 
    :tree-data="treeData" 
    :load-data="onLoadData" 
    @select="onSelect"
    :show-line="true"
    :show-icon="true"
  />
</template>

<script>

export default {
  props:{
    treeDatas:{
        type:Array,
        default:[]
    },
  },
  data() {
    return {
        treeData:this.treeDatas
    };
  },
  methods: {
    onLoadData(treeNode) {
        console.log(treeNode);
        return new Promise(resolve => {
        if (treeNode.dataRef.children) {//如果下级已经有数据，则直接跳出，否者异步请求数据
          resolve();
          return;
        }
        setTimeout(() => {//如果下级没有数据，异步请求数据
            let res=[
                { title: '科室1', key: `${treeNode.eventKey}-0`,child:true },
                { title: '科室2', key: `${treeNode.eventKey}-1`,child:false },
            ]
            let children=[]
            for (const item of res) {
                children.push({ 
                    title: item.title, 
                    key: item.key ,
                    isLeaf:!item.child
                })
                treeNode.dataRef.children=children
            }
          this.treeData = [...this.treeData];
          console.log(this.treeData);
          resolve();
        }, 1000);
      });
    },
    onSelect(selectedKeys, info){
        console.log(selectedKeys, info);
        this.$emit('onSelectTree',selectedKeys, info)
    }
  },
};
</script>
